<template>
  <div class="container">
    <div class="screen">
      <div v-for="(stream, index) in streamSource" :key="index" :class="{ 'video-multiple': isVideoMultiple }">
        <video :srcObject="stream.stream" :id="stream.connectUserSocketId" autoplay></video>
      </div>
    </div>
    <div class="btns">
      <time-and-id class="opreate"></time-and-id>
      <meeting-control-btns class="opreate"></meeting-control-btns>
      <meeting-comminicate class="opreate"></meeting-comminicate>
    </div>

  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, computed, watch, ref } from 'vue'
import { getPreviewAndInitConnection } from '@/plugins/webRTC'
import { connectSocketServer } from '@/plugins/socket'
import TimeAndId from './components/TimeAndId.vue'
import MeetingControlBtns from './components/MeetingControlBtns.vue'
import MeetingComminicate from './components/MeetingComminicate.vue'
import { useStore } from 'vuex'

const store = useStore()
const video = ref()

const streamSource = computed(() => {
  return store.state.meeting.streamSource
})

// 判断是否只有video元素，用来进行样式控制
const isVideoMultiple = computed(() => {
  return streamSource.value.length > 1
})

onBeforeMount(() => {
  connectSocketServer()
})
onMounted(() => {
  getPreviewAndInitConnection(store.state.meeting.isRoomHost, store.state.meeting.meettingUserName, store.state.meeting.roomId)
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(37, 38, 41, 1.0);
  color: #fff;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  flex-direction: column;

  .screen {
    flex-grow: 1;
    background-color: black;
    margin-bottom: 20px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;

    .video-multiple {
      width: 45%;

      video {
        width: 100%;
      }
    }
  }

  .btns{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .opreate{
      width: 33%;
    }
  }
}
</style>